<template>
	<view>
		<view class="orderbilling-container">
			<view class="orderbilling-header">
				<!-- #ifdef MP-WEIXIN -->
				<!-- 微信小程序中不显示按钮 -->
				<!-- #endif -->

				<!-- #ifndef MP-WEIXIN -->
				<!-- 非微信小程序平台（包括iOS和Android）显示按钮 -->
				<view class="back-icon">
					<uni-icons type="left" size="25" @click="back()"></uni-icons>
				</view>
				<!-- #endif -->
				<view class="title">
					订单结算
				</view>
			</view>
			<view class="orderbilling-content">
				<view class="show-info-box">
					<view class="show-info-box-top-section">
						<view class="show-info-name">
							{{joinQueryData.data.showName}}
						</view>
						<view class="show-info-addr">
							{{joinQueryData.data.venues}}
						</view>
					</view>
					<view class="show-info-box-bottom-section">
						<view class="show-time">
							{{joinQueryData.data.showTime}}
						</view>
						<view class="tickets-info">
							<view class="tickets-price">
								{{joinQueryData.data.ticketType}} {{joinQueryData.data.perTicketPrice}}元
							</view>
							<view class="tickets-amount">
								x{{joinQueryData.data.limitNum}}张
							</view>
						</view>

					</view>
				</view>
				<view class="ticket-detail-box">
					<view class="ticket-detail-box-header">
						<view class="ticket-detail-box-header-title">
							明细
						</view>
					</view>
					<view class="ticket-detail-box-content">
						<view class="ticket-detail-box-context">
							票款￥{{joinQueryData.data.ticketPrice}} + 平台服务费￥{{joinQueryData.data.serviceCost}}
						</view>
					</view>
				</view>
				<view class="spectator-info-box">
					<view class="spectator-info-box-header" @click="toSelectSpectator">

						<view class="spectator-info-box-header-title">
							实名观演人
						</view>
						<view class="spectator-info-box-header-tip">
							<view class="top-tip">
								已选{{selectNum}}/{{joinQueryData.data.limitNum}}位
							</view>
							<view class="bottom-tip">
								入场请携带对应证件
							</view>
						</view>
						<view class="spectator-info-box-header-icon">
							<uni-icons class="arrow-right" color="#999" type="right" size="18"></uni-icons>
						</view>
					</view>
					<view class="spectator-info-box-content">
						<view class="spectator-list">
							<view class="spectator-item" v-for="(item,index) in displaySpectatorList" :key="index">
								<view class="spectator-item-left">
									<view class="spectator-name">
										{{item.spectatorName}}
									</view>
									<view class="spectator-idcard">
										{{item.spectatorIdCardType}}：{{item.displayIdCard}}
									</view>
								</view>

								<view class="spectator-item-right">
									<uni-icons class="del-icon" type="clear" size="20"
										@click="delSpetator(item.id)"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="get-ticket-way-box">
					<view class="get-ticket-way-box-header">
						<view class="get-ticket-way-text">
							取票方式
						</view>
						<view class="get-ticket-way-type">
							{{joinQueryData.data.getDistributionType}}
						</view>
					</view>
					<view class="get-ticket" v-if="joinQueryData.data.getDistributionType==deliveryMethodTwo">
						<view class="get-ticket-way-box-content">
							<view class="get-ticket-way-text">
								取票人
							</view>
							<view class="get-ticket-way-person">
								{{globalData.userInfo.nickName}}
							</view>
						</view>
						<view class="get-ticket-way-box-footer">
							<view class="get-ticket-way-text">
								联系方式
							</view>
							<view class="get-ticket-way-phone">
								{{globalData.userInfo.phone}}
							</view>
						</view>
					</view>
					<view class="express" v-if="joinQueryData.data.getDistributionType==deliveryMethodOne">
						<view class="express-box-content" @click="toSelectAddr">
							<view class="express-box-content-left">
								<view class="address-null" v-if="addressObj==null">
									{{addressNullText}}
								</view>
								<view class="address-have" v-if="addressObj!=null">
									<view class="express-box-content-top-section">
										{{addressObj.name}} {{addressObj.phone}}
									</view>
									<view class="express-box-content-bottom-section">
										{{addressObj.baseAddress[0].text}}{{addressObj.baseAddress[1].text}}{{addressObj.baseAddress[2].text}}{{addressObj.addressDetail}}
									</view>
								</view>
							</view>
							<view class="express-box-content-right" :style="{ height: addressObj ? '80px' : '55px' }">
								<uni-icons class="right-icon" color="#999" type="right" size="18"></uni-icons>
							</view>
						</view>
						<view class="express-box-footer">
							<view class="express-text">
								配送费
							</view>
							<view class="express-cost">
								<text v-if="!isFreeShipping">￥{{fees}}</text>
								<text v-if="isFreeShipping">包邮</text>

							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="footer">
			<view class="submit-btn-box">
				<view class="total-price">
					<text class="red"> <text class="tiny">￥</text> {{joinQueryData.data.totalPrice}} </text>
				</view>
				<view class="submit-btn" @click="toPay">
					提交订单
				</view>
			</view>
		</view>
		<uni-popup ref="popup" border-radius="10px 10px 0 0">
			<view class="pay-box">
				<view class="pay-title">
					<view class="pay-title-text">
						选择支付方式
					</view>
					<view class="limit-time">
						剩余时间 <text class="red-font">{{countDown}}</text>
					</view>
					<view class="pay-cost">
						￥<text class="cost-font">{{joinQueryData.data.totalPrice}}</text>
					</view>
					<view class="id-close">
						<uni-icons class="id-close-icon" color="#333" type="closeempty" size="25"
							@click="close()"></uni-icons>
					</view>
				</view>
				<view class="pay-way">
					<view class="pay-way-item" v-for="(item, index) in payWayList" :key="index"
						@click="choose(item.id)">
						<view class="pay-way-item-left">
							<view class="pay-way-icon">
								<img class="pay-icon" :src="item.payWayImg" alt="" />
							</view>
							<view class="pay-way-name">
								{{item.payWayName}}
							</view>
						</view>

						<view class="pay-way-item-right">
							<uni-icons class="select-icon" type="circle" color="#d3d3d3" size="25"
								v-show="!item.isSelect"></uni-icons>
							<uni-icons class="select-icon" type="checkbox-filled" color="#ff2d2de2" size="25"
								v-show="item.isSelect"></uni-icons>
						</view>
					</view>
				</view>
				<view class="pay-btn-box">
					<view class="pay-btn" @click="goPay">
						{{payBtnName}}<text v-show="payBtnNameId==0">支付</text>
						<text class="small-font">￥</text><text
							class="weight-font">{{joinQueryData.data.totalPrice}}</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="inputDialog" type="dialog">
		      <uni-popup-dialog
		        mode="input"
		        :title="'￥'+joinQueryData.data.totalPrice"
		        :value="inputValue"
		        placeholder="请输入支付金额"
		        @confirm="paySuccess"
				confirmText="支付"
				confirmColor="#ff2d2de2"
		        @close="dialogClose"
		      ></uni-popup-dialog>
		    </uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onBeforeMount,
		onMounted,
		onUnmounted,
		watch,
		watchEffect,
		computed,
		inject
	} from 'vue';
	import {
		maskIdCard
	} from '@/common/maskIdCard.js';

	import serviceCostRule from '@/common/serviceCostRules.js'
	import shippingRule from '@/common/shippingRules.js'
	import {
		ORDER_DICTIONARY
	} from '@/common/orderDict.js'
	import {
		PAY_WAY_DICT
	} from '@/common/payWay.js'
	import {
		generateOrderNumber
	} from '@/common/orderNumberGenerator.js';
	import {
		onShow,
		onHide,
		onUnload,
		onLoad
	} from '@dcloudio/uni-app';
	/**
	 * 数据初始化区
	 */
	
	const inputDialogToggle = () => {
	  inputDialog.value.open();
	};
  const inputDialog = ref(null);
	const {
		deliveryMethodOne,
		deliveryMethodTwo
	} = ORDER_DICTIONARY;

	const globalData = inject('globalData');



	// 检查 globalData 是否被正确注入
	if (!globalData) {
		console.error('globalData is not provided')
	}
	// return { globalData };
	//总计
	let totalPrice = ref(0);
	//总票价
	let ticketPrice = ref(0);
	//平台服务费
	let serviceCost = ref(0);

	let selectNum = ref(0);

	let fees = ref(0);

	/**
	 * 
	 */
	const popup = ref(null);

	const goPay = () => {
inputDialogToggle();
	}
	
	const paySuccess=()=>{
		allData.value = {
			orderData: joinQueryData.value.data,
			spectatorList: spectatorList.value.data.list,
			addressObj: addressObj.value,
			fees: fees.value
		}
		
		
		
		const toOrderDetailData = {
			allData: allData.value,
			time: countDown.value,
			orderCreateTime: orderCreateTime.value,
			setOrderStatus:2,
			orderNumber: orderNumber.value,
			payWay:selectPayWay.value
		}
		uni.setStorage({
			key: 'toOrderDetail',
			data: toOrderDetailData,
			success: function() {
				console.log('数据存储成功');
				uni.redirectTo({
					url: "/pages/payedstatus/payedstatus"
				})
			},
			fail: function(err) {
				console.error('数据存储失败', err);
			}
		});
	}
	const open = () => {
		if (popup.value) {
			popup.value.open('bottom');
		}
		choose(payWayList.value[0].id);
		orderNumber.value = generateOrderNumber();
		payCountDown();

		orderCreateTime.value = new Date();
		const daysOfWeek = ['日', '一', '二', '三', '四', '五', '六'];
		const year = orderCreateTime.value.getFullYear();
		const month = orderCreateTime.value.getMonth() + 1; // 月份是从0开始的，所以需要加1
		const date = orderCreateTime.value.getDate();
		const dayOfWeek = daysOfWeek[orderCreateTime.value.getDay()];
		const hours = orderCreateTime.value.getHours();
		const minutes = orderCreateTime.value.getMinutes();
		const seconds = orderCreateTime.value.getSeconds();
		if (hours < 10) {
			orderCreateTime.value = year + '-' + month + '-' + date + ' ' + '0' + hours + ':' + minutes + ':' +
				seconds;
		} else {
			orderCreateTime.value = year + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + seconds;
		}
	};

	const close = () => {

		allData.value = {
			orderData: joinQueryData.value.data,
			spectatorList: spectatorList.value.data.list,
			addressObj: addressObj.value,
			fees: fees.value
		}
		uni.showModal({
			content: '支付未完成，是否离开？',
			confirmText: '离开',
			cancelText: '取消',
			confirmColor: '#ff2d2de2',
			success: (res) => {
				if (res.confirm) {
					if (popup.value) {
						popup.value.close(null);
					}

					const toOrderDetailData = {
						allData: allData.value,
						time: countDown.value,
						setOrderStatus: 2,
						orderCreateTime: orderCreateTime.value,
						orderNumber: orderNumber.value
					}
					uni.setStorage({
						key: 'toOrderDetail',
						data: toOrderDetailData,
						success: function() {
							console.log('数据存储成功');
							uni.redirectTo({
								url: "/pages/orderdetail/orderdetail"
							})
						},
						fail: function(err) {
							console.error('数据存储失败', err);
						}
					});


				} else if (res.cancel) {
					// 用户点击了取消，什么也不做
					console.log('用户点击了取消');
				}
			},
			fail: (err) => {
				console.error('模态对话框调用失败', err);
			}
		});
	};

	const choice = (item) => {
		if (popup.value) {
			popup.value.close(null);
		}
		formData.value.spectatorIdCardType = item;
	};

	/**
	 * 
	 * 
	 */

	let isFreeShipping = ref(false);

	//初始化取票方式
	// let getDistributionType = ref(null);

	let addressNullText = ref("请选择收货地址");
	//展示的观演人数组
	let displaySpectatorList = ref([]);

	//初始化观演人列表
	let spectatorList = ref({
		code: 2000,
		msg: "suceess",
		data: {}
	})

	spectatorList.value.data.list = [];

	//获取选择到的地址对象
	let addressObj = ref(null);

	//多表联查响应数据
	let joinQueryData = ref({
		code: 2000,
		msg: "success",
		data: {
			userId: 0,
			showName: "",
			venues: "",
			showTime: "",
			ticketType: "",
			perTicketPrice: 0,
			limitNum: 0,
			ticketPrice: 0,
			serviceCost: 0,
			totalPrice: 0,
			showImg: "",
			getDistributionType: "",
			coupons: 0,
			seatInfo: null

		}
	})

	let payData = ref(null);

	/**
	 * 支付倒计时
	 */
	const countDown = ref("15:00");
	const timer = ref(null);
	const endTime = ref(null);
	const payWayList = ref(PAY_WAY_DICT);
	const payBtnName = ref(null);
	const payBtnNameId = ref(0);
	const orderNumber = ref(null);
	const orderCreateTime = ref(null);
	const allData = ref(null);
	const selectPayWay =ref(null);

	const choose = (id) => {
		payBtnNameId.value = id;
		payWayList.value.forEach((item) => {
			item.isSelect = false;
			selectPayWay.value= item.payWayName;
		});
		
		const selectedItem = payWayList.value.find(item => item.id === id);
		if (selectedItem) {
			payBtnName.value = selectedItem.payWayName;
			selectedItem.isSelect = true;
		}
	};

	const formatTime = (seconds) => {
		const minutes = Math.floor(seconds / 60);
		const remainingSeconds = seconds % 60;
		return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
	};

	const payCountDown = () => {
		const totalSeconds = 15 * 60; // 15分钟转换为秒
		let remainingSeconds = totalSeconds;

		timer.value = setInterval(() => {
			if (remainingSeconds > 0) {
				remainingSeconds -= 1;
				countDown.value = formatTime(remainingSeconds);
			} else {
				clearInterval(timer.value);
				// 倒计时结束，可以在这里处理相关逻辑
			}
		}, 1000);
	};

	/**
	 * 方法区
	 */
	//选择观演人
	let toSelectSpectator = () => {
		uni.setStorage({
			key: 'getSelectSpectator',
			data: spectatorList.value.data.list,
			success: function() {
				console.log('数据存储成功');
				uni.navigateTo({
					url: "/pages/selectspectator/selectspectator"
				})
			},
			fail: function(err) {
				console.error('数据存储失败', err);
			}
		});

	}

	//去选择地址
	let toSelectAddr = () => {

		uni.setStorage({
			key: 'selectAddress',
			data: addressObj.value,
			success: function() {
				console.log('数据存储成功');
				uni.navigateTo({
					url: "/pages/selectaddress/selectaddress"
				})
			},
			fail: function(err) {
				console.error('数据存储失败', err);
			}
		});

	}


	let toPay = () => {
		if (selectNum.value < joinQueryData.value.data.limitNum || selectNum.value > joinQueryData.value.data
			.limitNum) {
			if (selectNum.value < joinQueryData.value.data.limitNum) {
				uni.showToast({
					title: '未选满' + joinQueryData.value.data.limitNum + '位观演人',
					icon: 'none'
				});
			} else if (selectNum.value > joinQueryData.value.data.limitNum) {
				uni.showToast({
					title: '已超过' + joinQueryData.value.data.limitNum + '位观演人',
					icon: 'none'
				});
			}
			return;
		} else if (joinQueryData.value.data.getDistributionType == deliveryMethodOne) {
			if (addressObj.value == null) {
				uni.showToast({
					title: '请选择收货地址',
					icon: 'none'
				});
				return;
			}
			open();
		} else {
			open();
		}


	}

	const payStorage = () => {
		payData.value = {
			orderData: joinQueryData.value.data,
			spectatorList: spectatorList.value.data.list,
			addressObj: addressObj.value,
			fees: fees.value,

		}

		uni.setStorage({
			key: 'toPay',
			data: payData.value,
			success: function() {
				console.log('数据存储成功');
				uni.navigateTo({
					url: "/pages/pay/pay"
				})
			},
			fail: function(err) {
				console.error('数据存储失败', err);
			}
		});
	}
	let back = () => {
		uni.navigateBack({
			delta: 1
		})
	}


	//删除观演人
	let delSpetator = (id) => {
		const index = spectatorList.value.data.list.findIndex(item => item.id === id);

		// 如果找到了对应的元素
		if (index !== -1) {
			// 使用 splice 方法删除原始数据中的元素
			spectatorList.value.data.list.splice(index, 1);
			selectNum.value = spectatorList.value.data.list.length;
			// 删除副本数组中的元素
			displaySpectatorList.value.splice(index, 1);
		}
	};


	onMounted(() => {
		uni.getStorage({
			key: 'storage_key',
			success: function(res) {
				console.log('获取的联查数据:', res.data);
				joinQueryData.value.data.getDistributionType = res.data.setDistributionType;
				joinQueryData.value.data.showName = res.data.allData.title;
				joinQueryData.value.data.venues = res.data.allData.venueName;
				joinQueryData.value.data.showImg = res.data.allData.imageUrl;
				joinQueryData.value.data.seatInfo = res.data.seatInfo;

				// 创建一个新的Date对象，默认为当前日期和时间
				const currentDate = new Date();


				// 使用getFullYear方法获取当前年份
				const currentYear = currentDate.getFullYear();
				joinQueryData.value.data.showTime = currentYear + " " + res.data.selectDateObj.day +
					" " + res.data.selectDateObj.time;
				joinQueryData.value.data.ticketType = res.data.selectTicketObj.ticketType;
				joinQueryData.value.data.perTicketPrice = res.data.selectTicketObj.ticketPrice;
				joinQueryData.value.data.limitNum = res.data.limitNum;
				joinQueryData.value.data.serviceCost = serviceCostRule(res.data.selectTicketObj
					.ticketType, res.data.limitNum);
				joinQueryData.value.data.ticketPrice = res.data.ticketPrice;
				joinQueryData.value.data.totalPrice = joinQueryData.value.data.ticketPrice +
					joinQueryData.value.data.serviceCost;
				if (joinQueryData.value.data.getDistributionType == deliveryMethodOne) {

					joinQueryData.value.data.totalPrice = joinQueryData.value.data.totalPrice + fees
						.value;
				}

			},
			fail: function(err) {
				console.error('获取数据失败', err);
			}
		});

		uni.getStorage({
			key: 'selectSpectator',
			success: function(res) {
				console.log('获取的观演人数据:', res.data);
				spectatorList.value.data.list = res.data;
				spectatorList.value.data.list.forEach(item => {
					displaySpectatorList.value.push({
						...item,
						displayIdCard: maskIdCard(item.spectatorIdNumber)
					});
				});

				selectNum.value = spectatorList.value.data.list.length;
			},
			fail: function(err) {
				console.error('获取数据失败', err);
			}
		});

		uni.getStorage({
			key: 'selectAddress',
			success: function(res) {
				console.log('获取的地址数据:', res.data);
				addressObj.value = res.data;
				console.log("address:", addressObj.value);
				isFreeShipping.value = shippingRule(res.data.baseAddress[0].text).isFreeShipping;
				fees.value = shippingRule(res.data.baseAddress[0].text).cost;
			},
			fail: function(err) {
				console.error('获取数据失败', err);
			}
		});
	});
</script>

<style lang="scss" scoped>
	.orderbilling-container {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #f8f8fe;
		color: #333;

		.orderbilling-header {
			top: 0px;
			width: 100%;
			height: 50px;
			display: flex;
			position: fixed;
			z-index: 0;
			background: #fff;
			box-sizing: border-box;
			text-align: center;
			justify-content: center;
			align-items: center;
			box-shadow: 0px 0px 4px 0px #d3d3d3;

			.title {
				position: absolute;
				line-height: 50px;
				font-size: 18px;
				z-index: 5;
				height: 50px;
			}

			.back-icon {
				z-index: 10;
				position: absolute;
				left: 10px;

			}
		}

		.orderbilling-content {
			width: 100%;
			height: auto;
			margin-top: 70px;
			box-sizing: border-box;
			padding: 0px 15px;
			padding-bottom: 100px;
			background: #f8f8fe;
			float: left;

			.show-info-box {
				width: 100%;
				height: 151px;
				float: left;
				background: #fff;
				border-radius: 8px;
				box-shadow: 0px 0px 2px 0px #d3d3d3;

				.show-info-box-top-section {
					width: 100%;
					height: 75px;
					float: left;
					display: block;
					box-sizing: border-box;
					padding: 0px 15px;

					.show-info-name {
						width: 100%;
						height: 37.5px;
						font-size: 16px;
						color: #333;
						line-height: 55px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.show-info-addr {
						width: 100%;
						height: 37.5px;
						color: #999;
						font-size: 12px;
						line-height: 25px;
					}
				}

				.show-info-box-bottom-section {
					width: calc(100% - 30px);
					height: 75px;
					display: block;
					border-top: 1px solid #ddd;
					float: left;
					box-sizing: border-box;
					margin: 0px 15px;

					.show-time {
						width: 100%;
						height: 37.5px;
						font-size: 12px;
						color: #333;
						line-height: 55px;
					}

					.tickets-info {
						width: 100%;
						height: 37.5px;
						color: #333;
						font-size: 12px;
						line-height: 25px;
					}

					.tickets-price {
						width: auto;
						height: 37.5px;
						color: #333;
						font-size: 12px;
						line-height: 25px;
						float: left;
					}

					.tickets-amount {
						width: auto;
						height: 37.5px;
						color: #333;
						font-size: 14px;
						line-height: 0px;
						float: right;
					}
				}

			}

			.ticket-detail-box {
				width: 100%;
				height: auto;
				float: left;
				background: #fff;
				border-radius: 8px;
				margin-top: 20px;
				box-shadow: 0px 0px 2px 0px #d3d3d3;

				.ticket-detail-box-header {
					width: 100%;
					height: 55px;
					float: left;
					line-height: 55px;
					box-sizing: border-box;
					padding: 0px 15px;

					.ticket-detail-box-header-title {
						width: auto;
						height: 55px;
						float: left;
						font-size: 14px;
					}
				}

				.ticket-detail-box-content {
					width: 100%;
					height: 55px;
					float: left;
					line-height: 55px;
					box-sizing: border-box;
					padding: 0px 15px;
					border-top: 1px solid #ddd;

					.ticket-detail-box-context {
						width: auto;
						height: 55px;
						float: left;
						font-size: 12px;
						color: #999;
					}
				}
			}

			.spectator-info-box {
				width: 100%;
				height: auto;
				float: left;
				background: #fff;
				border-radius: 8px;
				margin-top: 20px;
				box-shadow: 0px 0px 2px 0px #d3d3d3;

				.spectator-info-box-header {
					width: 100%;
					height: 55px;
					float: left;
					line-height: 55px;
					box-sizing: border-box;
					padding: 0px 15px;

					.spectator-info-box-header-title {
						width: auto;
						height: 55px;
						float: left;
						font-size: 14px;
					}

					.spectator-info-box-header-tip {
						width: auto;
						height: 55px;
						float: left;
						font-size: 11px;
						color: #999;
						margin-left: 15px;

						.top-tip {
							height: 27.5px;
							line-height: 40px;
						}

						.bottom-tip {
							height: 27.5px;
							line-height: 20px;
						}
					}

					.spectator-info-box-header-icon {
						width: auto;
						height: 55px;
						float: right;

						.arrow-right {
							line-height: 55px;
						}
					}
				}

				.spectator-info-box-content {
					width: 100%;
					height: auto;
					float: left;

					.spectator-list {
						.spectator-item {
							width: calc(100% - 30px);
							height: 55px;
							float: left;
							border-top: 1px solid #ddd;
							box-sizing: border-box;
							margin: 0px 15px;

							.spectator-item-left {
								width: calc(100% - 30px);
								height: 56px;
								float: left;

								.spectator-name {
									width: auto;
									height: 28px;
									line-height: 35px;
									font-size: 14px;
									color: #333;
									font-weight: bold;
								}

								.spectator-idcard {
									width: 100%;
									height: 28px;
									font-size: 12px;
									line-height: 25px;
									color: #999;
								}

							}

							.spectator-item-right {
								width: 20px;
								height: 56px;
								float: right;

								.del-icon {
									line-height: 56px;
									text-align: right;
								}
							}
						}
					}
				}
			}

			.get-ticket-way-box {
				width: 100%;
				height: auto;
				float: left;
				background: #fff;
				border-radius: 8px;
				margin-top: 20px;
				box-shadow: 0px 0px 2px 0px #d3d3d3;

				.get-ticket-way-text {
					height: 55px;
					line-height: 55px;
					float: left;
				}

				.get-ticket-way-box-header {
					width: calc(100% - 30px);
					height: 55px;
					float: left;
					box-sizing: border-box;
					margin: 0px 15px;
					border-bottom: 1px solid #ddd;
					font-size: 14px;

					.get-ticket-way-type {
						height: 55px;
						line-height: 55px;
						float: right;
					}
				}

				.get-ticket-way-box-content {
					width: calc(100% - 30px);
					height: 55px;
					float: left;
					box-sizing: border-box;
					margin: 0px 15px;
					border-bottom: 1px solid #ddd;
					font-size: 14px;

					.get-ticket-way-person {
						height: 55px;
						line-height: 55px;
						float: right;
					}
				}

				.get-ticket-way-box-footer {
					width: calc(100% - 30px);
					height: 55px;
					float: left;
					box-sizing: border-box;
					margin: 0px 15px;
					font-size: 14px;

					.get-ticket-way-phone {
						height: 55px;
						line-height: 55px;
						float: right;
					}
				}

				.express-box-content {
					width: calc(100% - 30px);
					height: auto;
					float: left;
					box-sizing: border-box;
					margin: 0px 15px;
					border-bottom: 1px solid #ddd;
					font-size: 14px;

					.express-box-content-left {
						width: calc(100% - 30px);
						height: auto;
						float: left;

						.address-null {
							width: calc(100% - 30px);
							height: 55px;
							line-height: 55px;
							float: left;
						}

						.address-have {
							width: 100%;
							height: 80px;
							float: left;

							.express-box-content-top-section {
								font-size: 14px;
								color: #333;
								height: 40px;
								line-height: 50px;
							}

							.express-box-content-bottom-section {
								font-size: 12px;
								height: 40px;
								line-height: 30px;
								color: #999;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}


					}

					.express-box-content-right {
						width: 20px;
						height: auto;
						display: flex;
						align-items: center;
						float: right;

						.right-icon {}
					}
				}

				.express-box-footer {
					width: calc(100% - 30px);
					height: 55px;
					float: left;
					box-sizing: border-box;
					margin: 0px 15px;
					font-size: 14px;

					.express-text {
						height: 55px;
						line-height: 55px;
						float: left;
					}

					.express-cost {
						height: 55px;
						line-height: 55px;
						float: right;
					}
				}
			}
		}
	}

	.submit-btn-box {
		width: 100%;
		height: 80px;
		background: #fff;
		box-sizing: border-box;
		padding: 20px 15px;
		position: fixed;
		bottom: 0px;
		box-shadow: 0px 0px 4px 0px #d3d3d3;

		.total-price {
			float: left;
			line-height: 40px;

			.tiny {
				font-size: 16px !important;
			}

			.red {
				color: #ff2d2de2;
				font-weight: bold;
				font-size: 20px;
			}
		}

		.submit-btn {
			width: 160px;
			height: 40px;
			font-size: 14px;
			float: right;
			background: #ff2d2de2;
			color: #fff;
			border-radius: 4px;
			line-height: 40px;
			text-align: center;
		}
	}


	.pay-box {
		width: 100%;
		height: 500px;
		background: #fff;
		position: relative;
		bottom: -34px;
		border-top-right-radius: 15px;
		border-top-left-radius: 15px;

		.pay-title {
			width: 100%;
			height: 80px;
			text-align: center;
			position: relative;

			.pay-title-text {
				height: 40px;
				line-height: 66px;
				font-size: 16px;
				color: #333;
			}

			.limit-time {
				font-size: 13px;
				line-height: 40px;
			}



			.id-close {
				position: absolute;
				right: 20px;
				top: 10px;
				height: 40px;

				.id-close-icon {
					line-height: 40px;
				}
			}

		}

		.pay-cost {
			font-size: 20px;
			line-height: 40px;
			height: 40px;
			width: 100%;
			float: left;
			text-align: center;

			.cost-font {
				font-size: 28px !important;
			}
		}

		.pay-way {
			width: 100%;
			height: 96px;
			background: #fff;
			box-sizing: border-box;
			padding: 0px 20px;
			margin-top: 15px;
			float: left;

			.pay-way-item {
				width: 100%;
				height: 48px;
				border-bottom: 1px solid #ddd;

				.pay-way-item-left {
					float: left;
					width: calc(100% - 30px);
					height: 48px;

					.pay-way-icon {
						float: left;
						width: 30px;
						height: 48px;
						box-sizing: border-box;
						padding: 14px 0px;

						.pay-icon {
							width: 20px;
							height: 20px;
						}
					}

					.pay-way-name {
						font-size: 14px;
						line-height: 48px;
					}
				}

				.pay-way-item-right {
					float: right;
					width: 20px;
					height: 48px;

					.select-icon {
						line-height: 48px;
					}
				}
			}

			.pay-way-item:last-child {
				border-bottom: none;
			}
		}

		.pay-btn-box {
			width: 100%;
			height: 80px;
			background: #fff;
			box-sizing: border-box;
			padding: 20px 15px;
			position: fixed;
			bottom: 0px;

			.pay-btn {
				width: 100%;
				box-sizing: border-box;
				padding: 0px 15px;
				height: 40px;
				font-size: 14px;
				background: #ff2d2de2;
				color: #fff;
				border-radius: 4px;
				line-height: 40px;
				text-align: center;

				.small-font {
					font-size: 12px !important;
				}

				.weight-font {
					font-weight: bold;
					font-size: 18px !important;
				}
			}
		}
	}

	.red-font {
		color: #ff2d2de2;
	}
	
	
</style>